<template>
  <div id="app">
    <Header :collapse.sync=collapse></Header>
    <el-container>
      <el-scrollbar style="height: 600px; margin-left: 10px">
        <el-aside>
            <Aside :collapse=collapse></Aside>
        </el-aside>
      </el-scrollbar>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Header from '@/components/Header.vue';
import Aside from '@/components/Aside.vue';

export default {
  components: {
    Header, Aside,
  },
  data() {
    return {
      collapse: false,
    };
  },

};
</script>
<style lang="css" scoped>
  @import "./assets/css/light-theme.css";

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
</style>

<style>
  body {
    padding: 0;
    margin: 0;
  }
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
